<script src="../api/home.js"></script>
<template>
  <el-row class="home-row">
    <el-col :span="13" >
      <div class="block">
        <el-timeline>
          <el-timeline-item v-for="item in matchList" :key="item.matchId" :timestamp="item.matchDate" placement="top">
            <el-card>
              <el-row>
                <el-col :span="7">
                  <image-preview :src="item.prizeLogo" :width="150" :height="150"/>
                </el-col>
                <el-col :span="17">
                  <h2>{{ item.prizeName }}</h2>
                  <h4>积分: {{ item.prizeIntegral }}</h4>
                  <h4>剩余数量: <span style="color: red">{{ item.prizeQuantity-item.prizeOutQuantity }}</span></h4>
                  <p>{{item.prizeIntroduce}}</p>

                  <el-button type="primary" round style="position: absolute;bottom: 5px;right: 5px" @click="yuyue(item)">兑换</el-button>
                </el-col>

              </el-row>
            </el-card>
          </el-timeline-item>
        </el-timeline>

      </div>
    </el-col>

    <el-col :span="9" style="margin-left: 25px">

      <el-row style="margin: 10px;padding:20px 10px;box-shadow: 0 0 4px rgb(148,147,147); border-radius: 10px;min-height: 200px">




        <template>
          <div class="con">
            <div class="now-data-myself">
              <div class="now-data-myself-time">{{ date }}</div>
              <div class="now-data-myself-week">{{ week }}</div>
            </div>
            <Calendar
              v-on:choseDay="clickDay"
              v-on:changeMonth="changeDate"
              v-on:isToday="clickToday"
            ></Calendar>
          </div>
        </template>

      </el-row>
      <el-row style="margin-top: 25px">
        <el-collapse  >
          <el-collapse-item v-for="item in noticeList" :title="item.noticeTitle" :name="item.noticeId">
            <div v-html="item.noticeContent"></div>
          </el-collapse-item>
        </el-collapse>
      </el-row>
    </el-col>


    <el-dialog
      title="兑换"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>您确定花费 <span style="color: red">{{match.prizeIntegral}}</span> 积分兑换 <span style="color: rgba(0,89,255,0.69)">{{match.prizeName}}</span> 吗? </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitYuYue">确 定</el-button>
  </span>
    </el-dialog>
  </el-row>
</template>

<script>
import { Homelist,listNotice,addOrder,listComment } from "@/api/home";
import Calendar from 'vue-calendar-component';

export default {
  name: "Index",
  components: {
    Calendar
  },

    data() {
    return {
      date: "",
      week: "",
      matchList:[],
      noticeList:[],
      commentList:[],
      dialogVisible: false,
      match:{
        matchName:null,
        matchId:null
      }
    };
  },
  created() {
    this.initHome();
    var now = new Date();
    this.date = now.getDate();//得到日期
    var day = now.getDay();//得到周几
    var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    this.week = arr_week[day];
  },
  methods: {
    submitYuYue(){
      this.dialogVisible = false;
      addOrder({prizeId:this.match.prizeId}).then(res=>{
        this.$message({
          message: '恭喜您，兑换成功!',
          type: 'success'
        });
      })
    },
    yuyue(match){
      this.match=match;
      this.dialogVisible = true;

    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false;
    },
    initHome(){
      Homelist().then(res=>{
        this.matchList=res.rows
      });
      listNotice({pageNum:1,pageSize:100}).then(res=>{
        this.noticeList=res.rows;
      });
      // listComment({pageNum:1,pageSize:100}).then(res=>{
      //   this.commentList=res.rows;
      //   console.log(this.commentList)
      // });
    },
    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); // 跳到了本月
    }
  }
};
</script>

<style scoped lang="scss">
.home-row{
  margin-top: 25px;
}
</style>

<style>
.now-data-myself {
  width: 40%;
  position: absolute;
  border-right: 1px solid rgba(227, 227, 227, 0.6);
}
.con {
  position: relative;
  max-width: 280px;
  margin: auto;
}
.con .wh_content_all {
  background: transparent !important;
}
.wh_top_changge li {
  color: #F56C6C !important;
  font-size: 15px !important;
}
.wh_content_item, .wh_content_item_tag {
  color: #303133 !important;
}
.wh_content_item .wh_isToday {
  background: #00d985  !important;
  color: #fff  !important;
}
.wh_content_item .wh_chose_day {
  background: #409EFF  !important;
  color: #ffff  !important;
}
.wh_item_date:hover {
  background: rgb(217, 236, 255) !important;
  border-radius: 100px !important;
  color: rgb(102, 177, 255)  !important;
}
.wh_jiantou1[data-v-2ebcbc83] {
  border-top: 2px solid #909399;
  border-left: 2px solid #909399;
  width: 7px;
  height: 7px;
}
.wh_jiantou2[data-v-2ebcbc83] {
  border-top: 2px solid #909399;
  border-right: 2px solid #909399;
  width: 7px;
  height: 7px;
}
.wh_top_tag[data-v-2ebcbc83] {
  color: #409EFF;
  border-top: 1px solid rgba(227, 227, 227, 0.6);
  border-bottom: 1px solid rgba(227, 227, 227, 0.6);
}
.wh_container[data-v-2ebcbc83] {
  max-width: 280px;
}
.wh_top_changge[data-v-2ebcbc83] {
  display: flex;
  width: 50%;
  margin-left: 43%;
}
.now-data-myself-time {
  color: #F56C6C;
  font-size: 28px;
  height: 30px;
  font-family: "Helvetica Neue";
}
.now-data-myself-week {
  font-size: 10px;
  color: #909399;
}
.wh_top_changge .wh_content_li[data-v-2ebcbc83] {
  font-family: Helvetica;
}
</style>
